import 'package:cleanetc_client/ui/login/login_view_model.dart';
import 'package:flutter/material.dart';

import 'package:cleanetc_client/generated/l10n.dart';

import 'package:cleanetc_client/mvvm/viewModel/base_view_provider.dart';
import 'package:flutter/src/widgets/framework.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LoginProvider();
  }
}

class LoginProvider extends BaseApiProvider<LoginViewModel> {
  @override
  Widget buildChild(
      BuildContext context, LoginViewModel viewModel, Widget? child) {
    return LoginWidget(viewModel);
  }

  @override
  LoginViewModel create(BuildContext context) {
    return LoginViewModel(context);
  }
}

class LoginWidget extends StatelessWidget {
  // 响应空白处的焦点的Node

  GlobalKey _formKey = GlobalKey<FormState>();
  final LoginViewModel viewModel;

  LoginWidget(this.viewModel, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            // leading: _leading(context),
            title: Text(""),
            actions: <Widget>[
              TextButton(
                child: Text("",
                    style: TextStyle(color: Colors.white)),
                onPressed: () {},
              )
            ],
          ),
          body: GestureDetector(
            onTap: () {
              // 点击空白页面关闭键盘
              viewModel.closeKeyboard(context);
            },
            child: SingleChildScrollView(
              padding:
                  const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
              child: buildForm(context),
            ),
          ),
        ),
     );
  }

  //构建表单
  Widget buildForm(BuildContext context) {
    return Form(
      key: _formKey, //设置globalKey，用于后面获取FormState
      autovalidateMode: AutovalidateMode.disabled,
      child: Column(
        children: <Widget>[
          Center(
              heightFactor: 1.5,
              child: FlutterLogo(
                size: 64,
              )),
          TextFormField(
              autofocus: false,
              controller: viewModel.unameController,
              decoration: InputDecoration(
                  labelText: "",
                  hintText: "",
                  hintStyle: TextStyle(fontSize: 12),
                  icon: Icon(Icons.person)),
              //校验用户名
              validator: (v) {
                return v!.trim().length > 0
                    ? null
                    : "";
              }),
          TextFormField(
              controller: viewModel.pwdController,
              decoration: InputDecoration(
                  labelText: "密码",
                  hintText: "显示密码",
                  hintStyle: TextStyle(fontSize: 12),
                  icon: Icon(Icons.lock),
                  suffixIcon: IconButton(
                      icon: Icon(
                        viewModel.visibility.value,
                        color: Colors.black,
                      ),
                      onPressed: viewModel.showPassWord())),
              obscureText: !viewModel.isShowPassWord.value,
              //校验密码
              validator: (v) {
                return v!.trim().length >= 6
                    ? null
                    : "";
              }),
          // 登录按钮
          Padding(
            padding: const EdgeInsets.only(top: 28.0),
            child: Row(
              children: <Widget>[
                Expanded(child: Builder(builder: (context) {
                  return ElevatedButton(
                    style: TextButton.styleFrom(
                        primary: Theme.of(context).primaryColor,
                        padding: EdgeInsets.all(15.0)),
                    child: Text("",
                        style: TextStyle(color: Colors.white)),
                    onPressed: () {
                      //由于本widget也是Form的子代widget，所以可以通过下面方式获取FormState
                      if (Form.of(context)!.validate()) {
                        onSubmit(context);
                      }
                    },
                  );
                })),
              ],
            ),
          )
        ],
      ),
    );
  }

  //验证通过提交数据
  void onSubmit(BuildContext context) {
    viewModel.closeKeyboard(context);
    viewModel.doLogin();
  }

}
